<template>
	<div class="personnel-info">
		<el-card>
			<div class="toolbar">
				<el-input v-model="keyword" placeholder="搜索工号/姓名/岗位" clearable style="width:220px" />
				<el-button type="primary" @click="openDialog()">新增人员</el-button>
			</div>
			<el-table :data="filteredData" border size="small">
				<el-table-column prop="empNo" label="工号" width="98" />
				<el-table-column prop="name" label="姓名" width="80" />
				<el-table-column prop="gender" label="性别" width="70" />
				<el-table-column prop="job" label="岗位" width="110" />
				<el-table-column prop="dept" label="所属部门" width="90" />
				<el-table-column prop="contact" label="联系方式" width="110" />
				<el-table-column prop="entryDate" label="入职日期" width="110" />
				<el-table-column prop="status" label="状态" width="80">
					<template #default="scope">
						<el-tag :type="scope.row.status === '在职' ? 'success' : 'info'">{{ scope.row.status }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" />
				<el-table-column label="操作" width="140">
					<template #default="scope">
						<el-button size="small" @click="openDialog(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="removeRow(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 新增/编辑弹窗 -->
		<el-dialog v-model="dialog.visible" :title="dialog.editIndex >= 0 ? '编辑人员' : '新增人员'" width="400px">
			<el-form :model="dialog.data" label-width="84px">
				<el-form-item label="工号">
					<el-input v-model="dialog.data.empNo" />
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="dialog.data.name" />
				</el-form-item>
				<el-form-item label="性别">
					<el-select v-model="dialog.data.gender">
						<el-option label="男" value="男" />
						<el-option label="女" value="女" />
					</el-select>
				</el-form-item>
				<el-form-item label="岗位">
					<el-input v-model="dialog.data.job" />
				</el-form-item>
				<el-form-item label="所属部门">
					<el-input v-model="dialog.data.dept" />
				</el-form-item>
				<el-form-item label="联系方式">
					<el-input v-model="dialog.data.contact" />
				</el-form-item>
				<el-form-item label="入职日期">
					<el-date-picker v-model="dialog.data.entryDate" type="date" value-format="YYYY-MM-DD"
						placeholder="选择日期" />
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="dialog.data.status">
						<el-option label="在职" value="在职" />
						<el-option label="离职" value="离职" />
					</el-select>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="dialog.data.remark" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialog.visible = false">取消</el-button>
				<el-button type="primary" @click="saveRow">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'

// 15条典型医药企业人员模拟数据
const tableData = ref([
	{ empNo: 'EMP10001', name: '张三', gender: '男', job: '车间主管', dept: '一车间', contact: '13990001101', entryDate: '2020-05-01', status: '在职', remark: '负责生产调度' },
	{ empNo: 'EMP10002', name: '李四', gender: '男', job: '设备工程师', dept: '设备部', contact: '13990001102', entryDate: '2019-03-20', status: '在职', remark: '精通自动化' },
	{ empNo: 'EMP10003', name: '王五', gender: '女', job: '质量主管', dept: '质控部', contact: '13990001103', entryDate: '2021-09-01', status: '在职', remark: '负责GMP质控' },
	{ empNo: 'EMP10004', name: '赵六', gender: '男', job: '工段长', dept: '包装工段', contact: '13990001104', entryDate: '2020-11-17', status: '在职', remark: '' },
	{ empNo: 'EMP10005', name: '孙蕾', gender: '女', job: '工艺员', dept: '工艺部', contact: '13990001105', entryDate: '2022-01-15', status: '在职', remark: '负责生产工艺' },
	{ empNo: 'EMP10006', name: '陈刚', gender: '男', job: '维修技师', dept: '设备部', contact: '13990001106', entryDate: '2018-07-21', status: '在职', remark: '设备维护专家' },
	{ empNo: 'EMP10007', name: '周敏', gender: '女', job: '质量检验员', dept: '质控部', contact: '13990001107', entryDate: '2022-03-10', status: '在职', remark: '' },
	{ empNo: 'EMP10008', name: '吴峰', gender: '男', job: '调度员', dept: '调度中心', contact: '13990001108', entryDate: '2021-06-01', status: '在职', remark: '负责班组排班' },
	{ empNo: 'EMP10009', name: '钱婷', gender: '女', job: '化验员', dept: '检验中心', contact: '13990001109', entryDate: '2019-10-30', status: '在职', remark: '' },
	{ empNo: 'EMP10010', name: '郑宇', gender: '男', job: '设备管理员', dept: '设备部', contact: '13990001110', entryDate: '2023-02-13', status: '在职', remark: '' },
	{ empNo: 'EMP10011', name: '朱华', gender: '女', job: '包装工', dept: '包装工段', contact: '13990001111', entryDate: '2020-08-19', status: '在职', remark: '优秀员工' },
	{ empNo: 'EMP10012', name: '蒋林', gender: '男', job: '原料仓管', dept: '仓储部', contact: '13990001112', entryDate: '2019-12-02', status: '在职', remark: '' },
	{ empNo: 'EMP10013', name: '李梅', gender: '女', job: '人事专员', dept: '人事部', contact: '13990001113', entryDate: '2021-04-09', status: '在职', remark: '' },
	{ empNo: 'EMP10014', name: '赵鹏', gender: '男', job: '发货员', dept: '物流中心', contact: '13990001114', entryDate: '2018-09-28', status: '在职', remark: '' },
	{ empNo: 'EMP10015', name: '胡雪', gender: '女', job: '信息管理员', dept: '信息中心', contact: '13990001115', entryDate: '2023-03-16', status: '在职', remark: '系统维护' }
])

const keyword = ref('')
const filteredData = computed(() => {
	if (!keyword.value) return tableData.value
	return tableData.value.filter(
		d => d.empNo.includes(keyword.value) || d.name.includes(keyword.value) || d.job.includes(keyword.value)
	)
})

// 新增/编辑弹窗
const dialog = reactive({
	visible: false,
	data: { empNo: '', name: '', gender: '', job: '', dept: '', contact: '', entryDate: '', status: '在职', remark: '' },
	editIndex: -1
})

function openDialog(row) {
	if (row) {
		dialog.data = { ...row }
		dialog.editIndex = tableData.value.findIndex(d => d.empNo === row.empNo)
	} else {
		dialog.data = { empNo: '', name: '', gender: '', job: '', dept: '', contact: '', entryDate: '', status: '在职', remark: '' }
		dialog.editIndex = -1
	}
	dialog.visible = true
}

function saveRow() {
	if (dialog.editIndex >= 0) {
		tableData.value[dialog.editIndex] = { ...dialog.data }
	} else {
		tableData.value.unshift({ ...dialog.data })
	}
	dialog.visible = false
}

function removeRow(idx) {
	tableData.value.splice(idx, 1)
}
</script>

<style scoped>
.personnel-info {
	padding: 16px;
}

.toolbar {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
</style>
  
